<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
    <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script>
</head>
<body>
    <div class="pub-container new-detail bgwhite" id="detailBox">
        <!-- <h2 class="title plr15">尤迈慈善基金会“互联网+医疗”精准健康扶贫研讨会召开</h2>
        <div class="video-wrapper space-border plr15">
            <div class="video-box">
                <a href="#">
                    <img class="img-cover" src="image/placeholder/1.jpg" alt="">
                    <i class="pub-i-play"></i>
                    <p class="pub-case-date">开讲时间:2021/02/20/13:00-16:00</p>
                </a>
            </div>
            <dd class="pub-case-info clearfloat">
                <span class="name">开讲专家:范洪伟</span>
                <span class="subscribe">100+</span>
                <button class="subscribe-btn">预约<span>100</span>+</button>
            </dd>
        </div>
        <p class="desc plr15">案例简介</p>
        <div class="rich-text plr15">
            <p style="text-indent: 2em;">6月14日下午，由北京尤迈慈善基金会组的“互联网+医疗”精准健康扶贫研讨会在北京尤迈诊所举行。 </p>
            <p style="text-indent: 2em;">“尤迈健康扶贫”项目是由国家卫健委和国务院扶贫办支持指导下的扶贫公益项目。在以北京协和医院退休老专家为首的专家队伍的参与下，推行公平可及的医疗服务，对分级诊疗进行实践摸索。贫困人口“足不出县”就能看协和专家，基层医生在看诊过程中也能接受北京专家的指导。</p>
        </div> -->
    </div>
    
    <div class="reserve popup">
        <div class="cont login-wrapper plr15">
            <div class="tit" id="reserveTit">预约</div>
            <form action="#" method="post" onsubmit="reverseSubmit();return false;" id="reserveForm" autocomplete="false">
                <ul class="list">
                    <li><input class="input" name="loginMobile" type="text" placeholder="请输入手机号码"></li>
                    <li class="other-btns flex-btw">
                        <input class="input" name="checkCode" type="text" placeholder="请输入手机验证码">
                        <span class="get-code-btn" id="getCodeBth">获取验证码</span>
                    </li>
                </ul>
                <input class="pub-submit-btn" id="reserveBtn" type="submit" value="马上预约">
            </form>
        </div>
    </div>

    <!-- 视频播放弹窗 -->
    <div class="video popup">
        <div class="cont" id="player">
        </div>
    </div>
    <script src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js"></script>
    <script src="js/jweixin-1.6.0.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script src="js/md5.js"></script>
    <script src="js/public.js"></script>
    <script>
        xcxConfig();
        var id = getQueryString('id');
        // 获取培训详情
        function getDetail(){
            http('/ad/getReserveDetail', {
                hasToken: false,
                data: {
                    classId: id,
                    userId: getCookie('userId')
                },
                success: function(res){
                    if(res.code === '01'){
                        // type: 1预约显示图片 2开讲跳转小程序 3重播播放视频
                        var data = res.data, html = '', type = data.classStatus;
                        html += '<h2 class="title plr15">' + data.title+ '</h2>' + 
                            '<div class="video-wrapper space-border plr15">' + 
                                '<div class="video-box">';
                                    // if(type === '1'){
                                    //     html += '<a href="javascript:;">' + 
                                    //         '<img class="img-cover" src="' + data.imgUrl + '">'
                                    // }
                                    // else if(type === '2'){
                                    //     html += '<a class="toWeapp" href="javascript:;" data-address="' + data.classAddress + '">' + 
                                    //         '<img class="img-cover" src="' + data.imgUrl + '">' + 
                                    //         '<i class="pub-i-play"></i>'
                                    // } else 
                                    if(type === '2' || type === '1'){
                                        html += '<a href="' + data.url + '">' + 
                                            '<img class="img-cover" src="' + data.imgUrl + '">' + 
                                            '<i class="pub-i-play"></i>'
                                    }
                                    else if(type === '3'){
                                        // if(data.videoId){
                                        //     html += '<a href="javascript:;" data-backUrl="'+ data.backUrl+'" data-videoId="' + data.videoId + '">' + 
                                        //     '<img class="img-cover" src="' + data.imgUrl + '">' + 
                                        //     '<i class="pub-i-play"></i>';
                                        // }
                                        // else {
                                        //     html += '<a href="javascript:;">' + 
                                        //     '<img class="img-cover" src="' + data.imgUrl + '">';
                                        // }
                                        html += '<a href="javascript:;" data-backUrl="'+ data.backUrl+'" data-videoId="' + data.videoId + '">' + 
                                        '<img class="img-cover" src="' + data.imgUrl + '">' + 
                                        '<i class="pub-i-play"></i>';
                                    }
                            html += '<p class="pub-case-date">开讲时间:' + data.startTime + '</p>' + 
                                '</a>' + 
                            '</div>' + 
                                '<dd class="pub-case-info clearfloat">' + 
                                    '<span class="name">开讲专家:' + data.name+ '</span>';
                            // 点赞
                            if(data.goodStatus == 1){
                                html += '<span class="subscribe active">' + getNumberHtml(data.good) + '</span>'
                            }else {
                                html += '<span class="subscribe">' + getNumberHtml(data.good) + '</span>'
                            }

                            if(type === '1'){
                                $('#reserveTit').html('预约');
                                $('#reserveBtn').val('马上预约');
                                if(data.reserveStatus == 1){
                                    html += '<button class="haved-subscribe">已预约' + getNumberHtml(data.people) + '</button>';
                                }else{
                                    html += '<button class="subscribe-btn" data-type="1"><span class="text">预约</span>' + getNumberHtml(data.people) + '</button>';
                                }
                                
                            }else if(type === '2'){
                                $('#reserveTit').html('报名');
                                $('#reserveBtn').val('马上报名');
                                if(data.reserveStatus == 1){
                                    html += '<button class="haved-subscribe">已报名' + getNumberHtml(data.people) + '</button>';
                                }else{
                                    html += '<button class="subscribe-btn" data-type="2"><span class="text">报名</span>' + getNumberHtml(data.people)+ '</button>';
                                }
                            }
                            html += '</dd>' + 
                            '</div>' + 
                            '<p class="desc plr15">培训简介</p>' + 
                            '<div class="rich-text plr15">' + data.detail + 
                            '</div>'; 
                            $('#detailBox').html(html);
                    }
                }
            })
        }
        
        getDetail();

        // 预约
        $('#detailBox').on('click', '.subscribe-btn', function(e){
            e.preventDefault();
            e.stopPropagation();
            $subscribeBtn = $(e.currentTarget);
            if($subscribeBtn.siblings('.subscribe').hasClass('active')) {return};
            var type = $subscribeBtn.attr('data-type');
            var userId = getCookie('userId');
            if(userId){
                http('/ad/saveReserve', {
                    hasToken: false,
                    data: {
                        loginMobile: localStorage.getItem('mobile'),
                        userId: userId,
                        classId: id
                    },
                    success: function(res){
                        if(res.code === '01'){
                            var count = Number($subscribeBtn.children('.number').html()) + 1;
                            if(type== 1){
                                toast('预约成功');
                                $subscribeBtn.children('.text').html('已预约');
                            }else {
                                toast('报名成功');
                                $subscribeBtn.children('.text').html('已报名');
                            }
                            $subscribeBtn.children('.number').html(count);
                            $subscribeBtn.addClass('haved-subscribe').removeClass('subscribe-btn');
                        }
                    }
                })
            }else {
                $('.reserve.popup').show();
            }
        })
        // 预约弹窗 - 未登录状态
        $('.reserve.popup').click(function(){
            $(this).hide();
            closePopup();
        })
        $('.reserve.popup .cont').click(function(e){
            e.stopPropagation();
        })
        function reverseSubmit(){
            var option = $('#reserveForm').serializeObject();

            // 数据验证
            if(validEmpty(option.loginMobile, '手机号不能为空')) return false;
            if(validEmpty(option.checkCode, '验证码不能为空')) return false;
            if(validPhone(option.loginMobile)) return false;

            var type = $subscribeBtn.attr('data-type');
            option.classId = id;
            http('/ad/saveReserve', {
                hasToken: false,
                data: option,
                success: function(res){
                    if(res.code === '01'){
                        if(type== 1){
                            toast('预约成功');
                        }else {
                            toast('报名成功');
                        }
                        setCookie('token', res.data.token);
                        setCookie('userId', res.data.userId, 1);
                        localStorage.setItem("mobile", option.loginMobile);
                        closePopup();
                        $('.reserve.popup').hide();
                        getDetail();
                    }else if(res.code === '09'){
                        setCookie('token', res.data.token);
                        setCookie('userId', res.data.userId, 1);
                        localStorage.setItem("mobile", option.loginMobile);
                        closePopup();
                        $('.reserve.popup').hide();
                        getDetail();
                    }
                }
            })
        }
        // 发送验证码
        var sendStatus = false;
        $('#getCodeBth').click(function(){
            if(sendStatus) return;
            var phone = $.trim($('[name=loginMobile]').val());
            // 数据验证
            if(validEmpty(phone, '手机号不能为空')) return;
            if(validPhone(phone)) return;

            sendStatus = true;
            getCode($(this), phone, 'reserve')
        })
        
        // 点赞
        $('#detailBox').on('click', '.subscribe', function(e){
            e.preventDefault();
            e.stopPropagation();
            subscribe($(e.currentTarget));
        })
        function subscribe($target){
            var userId = getCookie('userId');
            if(userId){
                http('/ad/saveGood', {
                    hasToken: false,
                    data: {
                        userId: userId,
                        classId: id
                    },
                    success: function(res){
                        if(res.code === '01'){
                            if(res.data.goodStatus === '1'){
                                toast('点赞成功');
                                $target.addClass('active').html(getNumberHtml(res.data.good));
                            }else {
                                toast('取消点赞成功');
                                $target.removeClass('active').html(getNumberHtml(res.data.good));
                            }
                        }
                    }
                })
            }else {
                window.location.href = 'login-code.html';
            }
        }
    </script>
</body>
</html>